<template>
  <div id="search">
    <div>
      <div class="searchBar">
        <i class="fa fa-search"></i><input type="text" name="cname" id="cname" v-model.trim="searchName">
      </div>
      <div class="searchName">
        <p>
          <span>电影</span>
          <span>电视剧</span>
          <span>综艺</span>
        </p>
      </div>
      <div class="searchCinema" v-for="item in show" :key="item.id">
        <div>
          <img :src="item.pic" alt="">
        </div>
        <div class="cinemaText">
          <span>{{ item.name }}</span>
          <span>{{ item.leixing }}</span>
          <span>{{ item.data }}</span>
        </div>
        <div class="cinemaScore">
          <span>{{ item.score }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Search',
  data() {
    return {
      searchName: '',
      cinemaList: []
    }
  },
  created() {
    this.getCinemaList()
  },
  methods: {
    getCinemaList() {
      var that = this
      axios
        .get('/mock/getCinemaList.json')
        .then(function (response) {
          console.log(response)
          if (response.data && response.data.cinemaList) {
            that.cinemaList = response.data.cinemaList
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  },
  computed: {
    show() {
      if (this.searchName == '') {
        return this.cinemaList
      } else {
        return this.cinemaList.filter(item => {
          return item.name.includes(this.searchName)
        })
      }
    }
  }
}
</script>

<style scoped>
#search {
  background-color: #fff;
}
.searchBar {
  width: 100%;
  height: 50px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
}
.searchBar i {
  position: absolute;
  margin-top: 18px;
  margin-left: 2%;
}
.searchBar input[type='text'] {
  width: 92%;
  height: 20px;
  margin-top: 15px;
  margin-left: 1.5%;
  padding-left: 4%;
  padding-left: 5%;
  border: none;
  border-radius: 5px;
  outline: none;
}
.searchName {
  background-color: #fff;
  padding-left: 1.5%;
  height: 45px;
  line-height: 40px;
  border-bottom: 1px solid #ddd;
}
.searchName p {
  color: grey;
  font-size: 24px;
  font-weight: bold;
}
.searchName p span::after {
  content: '/';
  font-weight: bold;
}
.searchCinema {
  background-color: #fff;
  margin-left: 1.5%;
  border-bottom: 1px dotted #ddd;
  display: flex;
  flex-direction: row;
  padding: 10px 0;
}
.cinemaText {
  width: 80%;
  margin-left: 15px;
  display: flex;
  flex-direction: column;
}
.cinemaText :first-child {
  font-size: 26px;
}
.cinemaText span {
  font-weight: bold;
  margin-bottom: 10px;
}
.cinemaScore {
  font-size: 20px;
  color: orange;
}
</style>